<template>
  <!-- 这是我的订单页面 -->
  <div id="myorder">
    <div class="orderContent">
      <h2>{{ $t("MyOrder.MOrder") }}</h2>
      <el-tabs type="border-card" @tab-click="handleClick">
        <el-tab-pane :label="$t('MyOrder.allOrders')"></el-tab-pane>
        <el-tab-pane :label="$t('MyOrder.WaitForPayment')"></el-tab-pane>
        <el-tab-pane :label="$t('MyOrder.WaitForSending')"></el-tab-pane>
        <el-tab-pane :label="$t('MyOrder.WaitForReceiving')"></el-tab-pane>
        <el-tab-pane :label="$t('MyOrder.OffTheStocks')"></el-tab-pane>
      </el-tabs>
      <div
        class="tables"
        v-for="(item, index) in dataList"
        :key="item.goods_id"
      >
        <!-- <p>订单状态: {{item[0].order_status}}/ 申请状态: {{item[0].refund_status}}/申请类型 : {{item[0].refund_rtype}}</p> -->
        <h3>
          {{
            item[0].order_status
              | orderStatus(
                item[0].refund_status,
                item[0].refund_rtype,
                stateI18n
              )
          }}
        </h3>
        <div class="tables_title">
          <div class="title_left">
            <div class="order_information">
              {{ item[0].createtime | orderTiem }}<i class="placeholder">|</i
              >{{ item[0].realname }}<i class="placeholder">|</i>订单号：{{
                item[0].ordersn
              }}<i class="placeholder">|</i
              >{{ item[0].paytype | paymentMethod(paymentI18n) }}
            </div>
          </div>
          <div class="title_right">
            {{ $t("MyOrder.AmountPayable") }}：
            <h3>{{ orderAmount(index) }}</h3>
            元
          </div>
        </div>
        <div class="tables_content">
          <div class="product_list">
            <ul>
              <li v-for="(itemArr, index) in item" :key="index">
                <div class="product_img">
                  <img :src="url + itemArr.thumb" />
                </div>
                <div class="product_title">
                  <p>{{ itemArr.title }}</p>
                  <span>{{ itemArr.price }} 元 × {{ itemArr.total }}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="order_payment">
            <!-- 评价状态：0 可评价，1 追加评价，2 已评价，评价和追加评价都写了 -->
            <button
              @click="payment(index)"
              class="payment_button"
              v-if="item[0].order_status === 0"
            >
              {{ $t("MyOrder.payImmediately") }}
            </button>
            <button @click="confirm(index)" v-if="item[0].order_status == 2">
              {{ $t("MyOrder.confirmReceipt") }}
            </button>
            <button
              @click="evaluate(index)"
              v-if="item[0].order_status == 3 && item[0].iscomment === 0"
            >
              {{ $t("MyOrder.evaluate") }}
            </button>
            <button
              @click="evaluate(index)"
              v-if="item[0].order_status == 3 && item[0].iscomment === 1"
            >
              {{ $t("MyOrder.additionalEvaluation") }}
            </button>
            <button
              @click="deleteOrder(index)"
              v-if="item[0].order_status == -1 || item[0].order_status == 3"
            >
              {{ $t("MyOrder.deleteOrder") }}
            </button>
            <button
              @click="details(index)"
              v-if="
                item[0].order_status == -1 ||
                item[0].order_status == 0 ||
                item[0].order_status == 1 ||
                item[0].order_status == 2 ||
                item[0].order_status == 3
              "
            >
              {{ $t("MyOrder.theOrderDetails") }}
            </button>
            <!-- <button v-if="(item[0].order_status == 0 || 1 || 2 || 3 ? true : false)">联系客服</button> -->
          </div>
        </div>
      </div>
      <!-- 订单分页 -->
      <paging :obj="pageObj" @page="child" v-if="pagingBool"></paging>
    </div>
  </div>
</template>

<script>
import paging from "../../components/Paging.vue";
export default {
  data() {
    return {
      loading: true, // 加载完数据再显示页面
      dataList: [], // 渲染列表数据
      orderStatusList: [], // 订单状态存放列表，例：订单状态0，待付款。1，待发货
      orderList: [], // 订单全部订单列表数据
      pagingBool: false, // 是否显示分页组件
      paymentBool: false, // 是否要显示，"立即支付"，按钮
      // 传给分页组件的数据
      pageObj: {
        id: "Myorder",
        currentPage: 1, //默认第一页
        pageSize: 5, //每页显示多少条数据
        totals: 0, //一共多少条数据
      },
      pageIndex: 1, // 分页，当前页数，用来删除订单后操作
      url: "https://mp.uekea.cn/attachment/", //图片拼接
    };
  },
  components: {
    paging,
  },
  methods: {
    // 渲染数组
    renderArray(index) {
      let arr = [];
      // 一共多少条数据/每页显示的条数 = 一共有多少页，要是不进行删除的，这个可以不要
      let s = this.pageObj.totals / this.pageObj.pageSize;
      if (index > s && index == s + 1) {
        index = s;
      }
      let pageIndex = this.pageObj.pageSize * (index - 1); // 每一页开始下标
      let pageNum = this.pageObj.pageSize * index; // 每一页最后下标
      // 从每一页开始下标循环到小于每一页结束下标
      for (let k = pageIndex; k < pageNum; k++) {
        // 判断订单状态数组其中不为空
        if (this.orderStatusList[k] != undefined) {
          arr.push(this.orderStatusList[k]);
        } else {
          break;
        }
      }
      // 判断渲染数组长度，是否大于0，有数据才赋值，没有就赋值空，不显示分页
      if (arr.length > 0) {
        this.dataList = arr; // 赋值给渲染数组
      } else {
        this.dataList = []; // 赋值给渲染数组
        this.pagingBool = false; // 隐藏分页组件
      }
      // 判断状态数组长度，是否大于每页显示数量，大于才显示分页
      if (this.orderStatusList.length > this.pageObj.pageSize) {
        this.pagingBool = true; // 显示分页组件
      } else {
        this.pagingBool = false; // 隐藏分页组件
      }
    },
    // 分页组件传过来的数据
    child(i) {
      this.pageIndex = i;
      this.renderArray(i);
    },
    // 标签页点击选择
    handleClick(tab) {
      this.pageList(Number(tab.index));
    },
    // 导航组件列表封装，订单状态切换栏
    pageList(index) {
      var _this = this;
      let arr = [];
      let arr2 = [];
      // 判断下标重新赋值新的下标值
      // let Num = "";
      // if (index == 0) {
      //   Num = "all";
      // } else if (index == 1) {
      //   Num = "0";
      // } else if (index == 2) {
      //   Num = "1";
      // } else if (index == 3) {
      //   Num = "2";
      // } else if (index == 4) {
      //   Num = "3";
      // }
      // _this
      //   .$get(`user/order/${_this.$Cookie.getCookie("userID")}/${Num}`, {})
      //   .then((res) => {
      //     // 循环返回的订单数据，看是否有相同的订单，有就放一起。
      //     // (注：返回的数据是一个商品一条数据，如果一个订单多个商品，就要进行处理，把相同订单商品放在同一个订单上。)
      //     if (res.code == 200) {
      //       let newArr = [];
      //       // 循环res.data.list数据，判断订单号相同的就放一起
      //       // (注：返回的数据是一个商品一条数据，如果一个订单多个商品，就要进行处理，把相同订单商品放在同一个订单上。)
      //       for (let i = 0; i < res.data.length; i++) {
      //         let dataArr = [];
      //         // 循环一次，dataArr就是空数组，添加到数组里面，下面进行判断
      //         dataArr.push(res.data[i]);
      //         // 循环，i+1,如i=0,那么下面j=0，相当与和自身比较，所以j=i+1,直接进行下一位比较。
      //         for (let j = i + 1; j < res.data.length; j++) {
      //           // 判断dataArr数组第一个id是否和res.data.list里面的id相同，因为dataArr数组在第一层循环只添加了一个，所以dataArr[0]
      //           if (dataArr[0].orderid == res.data[j].orderid) {
      //             // 第一层循环就添加了一个到数组，所以后面有相同的直接添加到数组.
      //             dataArr.push(res.data[j]);
      //             res.data.splice(j, 1);
      //             // 数组删除后，里面的会往前进一位(例:如果删除了2下标的，下标3的前进一位会变成2，不减1，那么下标2就会跳过检测)
      //             j--;
      //           }
      //         }
      //         // 判断订单是否在 待付款 状态
      //         if (dataArr[0].order_status === 0) {
      //           _this.endTime(dataArr[0].createtime, dataArr[0].orderid);
      //         }

      //         newArr.push(dataArr);
      //       }
      //       let arrdata = [];
      //       // 循环，分页组件，每页显示多少条数据，拿处理后的newArr前几条数据渲染到页面
      //       for (let i = 0; i < _this.pageObj.pageSize; i++) {
      //         arrdata.push(newArr[i]);
      //       }
      //       _this.dataList = arrdata; // 渲染的订单数据
      //       _this.orderStatusList = JSON.parse(JSON.stringify(newArr)); // 订单状态列表
      //       _this.orderList = JSON.parse(JSON.stringify(newArr)); // 存储的完整订单数据，处理后的
      //       // 判断返回的订单数量，是否大于分页，每页显示的数量，如果是就显示分页，如果不是就不显示
      //       if (newArr.length > _this.pageObj.pageSize) {
      //         _this.pageObj.totals = newArr.length;
      //         _this.pagingBool = true; //显示分页
      //       }
      //       _this.loading = false;
      //     }
      //     window.addEventListener("beforeunload", (e) => _this.monitorPage(e));
      //   });
      _this.pageObj.currentPage = 1; // 分页第一页
      if (index != 0) {
        for (let i = 0; i < _this.orderList.length; i++) {
          // for (let k = 0; k < _this.orderList[i].length; k++) {

          // 判断商品订单状态为 待付款，并 导航栏切换到 待付款 时，进入判断
          if (
            _this.orderList[i][0].order_status === 0 &&
            index - 1 === _this.orderList[i][0].order_status
          ) {
            _this.endTime(
              _this.orderList[i][0].createtime,
              _this.orderList[i][0].orderid
            );
          }
          // 把全部订单，订单状态一样的，添加到数组
          if (_this.orderList[i][0].order_status == index - 1) {
            arr.push(_this.orderList[i]);
          }

          // }
        }
      } else {
        _this.orderStatusList = JSON.parse(JSON.stringify(_this.orderList));
        arr = _this.orderList;
      }
      // 判断分页的每页显示数量是否大于，总的订单列表数量，要是不大于，就不显示分页，直接显示订单数据
      if (arr.length > _this.pageObj.pageSize) {
        // 大于每页显示数量，显示分页，取每页显示多少条数据
        for (let i = 0; i < _this.pageObj.pageSize; i++) {
          arr2.push(arr[i]);
          _this.dataList = arr2;
        }
        _this.pageObj.totals = arr.length; // 赋值分页总数量
        _this.orderStatusList = JSON.parse(JSON.stringify(arr)); // 赋值订单状态列表
        _this.pagingBool = true; //显示分页
      } else {
        _this.dataList = arr; // 少于每页显示数量，直接显示
        _this.orderStatusList = JSON.parse(JSON.stringify(arr)); // 赋值订单状态列表
        _this.pageObj.totals = 0; // 分页总数清零
        _this.pagingBool = false; //不显示分页
      }
    },

    // 给小于10的时间，前面添加0
    timeFormat(param) {
      // 小于10，数值前面加0，大于10，值就不改变
      return param < 10 ? "0" + param : param;
    },
    // 立即支付
    payment(index) {
      var _this = this;
      let orderTime =
        new Date(_this.dataList[index][0].createtime).getTime() + 86400; // 订单支付结束时间秒数，订单生成时间 + 结束秒数 86400 1天的时间
      let newTime = Math.floor(new Date().getTime() / 1000); // 本地时间秒数
      // 结束时间 - 本地时间 小于等于0，代表时间过期，取消订单
      if (orderTime - newTime <= 0) {
        // 支付时间过期，取消订单
        _this
          .$put("user/order/cancel", {
            openid: _this.$Cookie.getCookie("userID"),
            order_id: _this.dataList[index][0].orderid,
            close_reason: "我不想买了",
          })
          .then((res) => {
            if (res.code == 204) {
              _this.$MessageAlert(
                true,
                this.$t("MyOrder.paymentTime"),
                "success"
              );
              setTimeout(() => {
                location.reload(); // 刷新页面
              }, 1000);
            }
          });
      } else {
        // 支付时间没过期，处理数据，储存到vuex到支付页面调用
        let arr = []; // 订单信息
        let dataChild = _this.dataList[index]; // 渲染数组里面，要支付的订单数据
        // mobile: dataChild[0].mobile.substring(0, 3) + "****" + dataChild[0].mobile.substr(-4, 4),   // 手机号码
        // 收货地址数据
        let ShippingAddress = {
          province: dataChild[0].province, // 省
          city: dataChild[0].city, // 市
          area: dataChild[0].area, // 区
          address: dataChild[0].address, // 详细地址
          isdefault: dataChild[0].isdefault, // 是否为默认收货地址
          realname: dataChild[0].realname, // 收件人
          mobile: dataChild[0].mobile, // 手机号码
          id: dataChild[0].address_id, // 收货地址id
          street: "",
          zipcode: "",
        };
        let orderObj = {}; // 传到支付页面的订单数据
        let sum = 0; // 订单总价
        // 提取当前要支付的订单数据，看是否有多个商品
        if (dataChild.length > 1) {
          // 有多个商品，用循环处理
          for (let i = 0; i < dataChild.length; i++) {
            sum += Number(dataChild[i].price) * Number(dataChild[i].total); // 订单总价
            let obj = {}; // 商品信息
            obj.goods_id = dataChild[i].goodsid; // 商品id
            obj.goods_image = dataChild[i].thumb; // 商品图片
            obj.id = ""; // 购物车商品id
            obj.merch_id = dataChild[i].merchid; // 店铺id
            obj.min_price = dataChild[i].price; // 商品单价
            obj.num = dataChild[i].total; // 商品购买数量
            obj.title = dataChild[i].title; // 商品标题
            arr.push(obj); // 单个商品的信息添加到商品数组里面
          }
        } else {
          sum = Number(dataChild[0].price) * Number(dataChild[0].total); // 订单总价
          let obj = {}; // 商品信息
          obj.goods_id = dataChild[0].goodsid;
          obj.goods_image = dataChild[0].thumb;
          obj.id = "";
          obj.merch_id = dataChild[0].merchid;
          obj.min_price = dataChild[0].price;
          obj.num = dataChild[0].total;
          obj.title = dataChild[0].title;
          arr.push(obj); // 单个商品的信息添加到商品数组里面
        }
        arr.unshift(dataChild[0].ordersn); // 订单号
        orderObj.ShippingAddress = ShippingAddress; // 收货地址
        orderObj.PageID = "MyOrder"; // 页面id，判断是从购物车进程支付页面的，还是从订单进入支付页面的
        orderObj.invoiceText = dataChild[0].invoicename.substring(
          dataChild[0].invoicename.indexOf("]") + 1,
          dataChild[0].invoicename.indexOf("（")
        ); // 发票人名称
        orderObj.invoiceTitle = dataChild[0].invoicename.substr(
          dataChild[0].invoicename.indexOf("（") + 1,
          2
        ); // 发票，个人还是单位
        orderObj.orderCode = dataChild[0].temporary_ordersn; // 临时订单号
        orderObj.sum = sum; // 订单金额
        orderObj.order_status = dataChild[0].order_status; // 订单状态
        orderObj.wares = [arr]; // 商品信息

        _this.$store.commit("orderSMS", dataChild[0].brand_phone); // 储存当前订单店铺手机号码
        _this.$store.commit("order", orderObj); // 订单信息存储在vuex
        _this.$router.push({ path: "/payment" }); // 跳转到支付页面
      }
    },
    // 订单详情
    details(index) {
      var _this = this;
      // _this.$router.push({"path": "/accountInformation/orderDetails", query:{orderid: _this.dataList[index][0].orderid}});

      let arr = []; // 订单信息
      let dataChild = _this.dataList[index];
      let ShippingAddress = {
        province: dataChild[0].province, // 省
        city: dataChild[0].city, // 市
        area: dataChild[0].area, // 区
        address: dataChild[0].address, // 详细地址
        isdefault: dataChild[0].isdefault, // 是否为默认收货地址
        realname: dataChild[0].realname, // 收件人
        mobile:
          dataChild[0].mobile.substring(0, 3) +
          "****" +
          dataChild[0].mobile.substr(-4, 4), // 手机号码
        id: dataChild[0].address_id, // 收货地址id
        street: "",
        zipcode: "",
      }; // 收货地址数据
      let orderObj = {}; // 传到订单详情页面的订单数据
      let sum = 0; // 订单总价
      // let dataChild = _this.dataList[index];

      // 提取当前订单的数据
      if (dataChild.length > 1) {
        for (let i = 0; i < dataChild.length; i++) {
          sum += Number(dataChild[i].price); // 订单总价
          let obj = {}; // 商品信息
          obj.goods_id = dataChild[i].goodsid; // 商品id
          obj.goods_image = dataChild[i].thumb; // 商品图片
          obj.id = ""; // 购物车商品id
          obj.merch_id = dataChild[i].merchid; // 店铺id
          obj.min_price = dataChild[i].price; // 商品单价
          obj.num = dataChild[i].total; // 商品购买数量
          obj.title = dataChild[i].title; // 商品标题
          obj.refundid = dataChild[i].refundid; // 是否有申请，0 没有，退款id为有
          arr.push(obj); // 订单号
        }
        // arr.unshift(dataChild[0].ordersn);   // 订单号
      } else {
        sum += Number(dataChild[0].price); // 订单总价
        let obj = {}; // 商品信息
        obj.goods_id = dataChild[0].goodsid;
        obj.goods_image = dataChild[0].thumb;
        obj.id = "";
        obj.merch_id = dataChild[0].merchid;
        obj.min_price = dataChild[0].price;
        obj.num = dataChild[0].total;
        obj.title = dataChild[0].title;
        obj.refundid = dataChild[0].refundid;
        arr.push(obj); // 订单号
      }
      arr.unshift(dataChild[0].ordersn); // 订单号
      // 判断是否有:符合，一般有的就是单位发票，后面跟着纳税人识别号
      if (
        dataChild[0].invoicename.indexOf(":") != -1 &&
        dataChild[0].invoicename.substring(
          dataChild[0].invoicename.indexOf("(") + 1,
          dataChild[0].invoicename.indexOf(":")
        ) == "单位"
      ) {
        orderObj.invoiceTitle = "单位"; // 发票抬头
        orderObj.taxNumber = dataChild[0].invoicename.substring(
          dataChild[0].invoicename.indexOf(":") + 1,
          dataChild[0].invoicename.indexOf(")")
        ); // 单位纳税人识别号
      } else {
        orderObj.invoiceTitle = "个人"; // 发票抬头
        orderObj.taxNumber = ""; // 单位纳税人识别号
      }

      // orderObj.ShippingAddress = dataChild[0].address;   // 收货地址
      orderObj.ShippingAddress = ShippingAddress; // 收货地址
      orderObj.PageID = "MyOrder"; // 页面id，判断是从购物车进程支付页面的，还是从订单进入支付页面的
      orderObj.sum = sum; // 订单金额
      orderObj.orderCode = ""; // 临时订单号
      orderObj.order_status = dataChild[0].order_status; // 订单状态，待发货之类
      orderObj.wares = arr; // 商品数据数组
      orderObj.paytype = dataChild[0].paytype; // 订单支付方式
      orderObj.remark = dataChild[0].remark; // 留言，备注
      orderObj.orderid = dataChild[0].orderid; // 订单id
      orderObj.invoiceText = dataChild[0].invoicename.substring(
        dataChild[0].invoicename.indexOf("]") + 1,
        dataChild[0].invoicename.indexOf("(")
      ); // 发票人名称
      orderObj.invoiceType = dataChild[0].invoicename.substring(
        1,
        dataChild[0].invoicename.indexOf("]")
      ); // 发票类型，纸质发票

      _this.$store.commit("orderDET", orderObj); // 订单详情信息存储在vuex
      // _this.$router.push({"path": "/accountInformation/orderDetails", query:{orderid: _this.dataList[index][0].orderid}});

      // 判断订单是否在 待付款 状态，不是就直接跳转 详情页面
      if (_this.dataList[index][0].order_status === 0) {
        let orderTime =
          new Date(_this.dataList[index][0].createtime).getTime() + 86400; // 订单支付结束时间秒数，订单生成时间 + 结束秒数 86400 1天的时间
        let newTime = Math.floor(new Date().getTime() / 1000); // 本地时间秒数
        // 结束时间 - 本地时间 小于等于0，代表时间过期，取消订单
        if (orderTime - newTime <= 0) {
          _this
            .$put("user/order/cancel", {
              openid: _this.$Cookie.getCookie("userID"),
              order_id: _this.dataList[index][0].orderid,
              close_reason: "我不想买了",
            })
            .then((res) => {
              if (res.code == 204) {
                _this.$router.push({
                  path: "/accountInformation/orderDetails",
                  query: { orderid: _this.dataList[index][0].orderid },
                });
              }
            });
        } else {
          _this.$router.push({
            path: "/accountInformation/orderDetails",
            query: { orderid: _this.dataList[index][0].orderid },
          });
        }
      } else {
        _this.$router.push({
          path: "/accountInformation/orderDetails",
          query: { orderid: _this.dataList[index][0].orderid },
        });
      }
    },
    // 确认收货
    confirm(index) {
      var _this = this;
      _this
        .$confirm(this.$t("orderDetails.confirm2"), this.$t("Shopping.Tips"), {
          confirmButtonText: this.$t("Shopping.yes"),
          cancelButtonText: this.$t("Shopping.no"),
        })
        .then(() => {
          // 确认收货接口
          _this
            .$put("user/order/confirm", {
              openid: _this.$Cookie.getCookie("userID"),
              order_id: _this.dataList[index][0].orderid,
            })
            .then((res) => {
              if (res.code == 204) {
                let j = _this.pageObj.pageSize * (_this.pageIndex - 1) + index;
                // 循环把订单里面的商品状态都改变为 3（交易完成）
                for (let i = 0; i < _this.dataList[index].length; i++) {
                  _this.dataList[index][i].order_status = 3;
                }
                // 循环原本数组，把确认收货订单号id，相同的订单状态改变
                for (let k = 0; k < _this.orderList.length; k++) {
                  // 判断确认收货订单，和原数组订单的id相同
                  if (
                    _this.orderList[k][0].orderid ==
                    _this.orderStatusList[j][0].orderid
                  ) {
                    if (_this.orderList[k].length > 1) {
                      // 再循环原数组相同订单id，的商品
                      for (let s = 0; s < _this.orderList[k].length; s++) {
                        _this.orderList[k][s].order_status = 3;
                      }
                    } else {
                      _this.orderList[k][0].order_status = 3;
                    }
                    break;
                  }
                }
                // _this.dataList.splice(index, 1);      // 删除渲染数组里面的当前数据
                _this.orderStatusList.splice(j, 1); // 删除订单状态数组里面的当前数据
                _this.pageObj.totals = _this.orderStatusList.length; // 赋值分页总数量
                _this.renderArray(_this.pageIndex); // 调用分页方法
              }
            });
        });
    },
    // 评价订单
    evaluate(index) {
      this.$store.commit("orderEvaluation", this.dataList[index]); // 存储到状态管理
      this.$router.push({ path: "/accountInformation/orderEvaluation" }); // 跳到评价页面
    },
    // 删除订单
    deleteOrder(index) {
      var _this = this;
      _this
        .$confirm(this.$t("orderDetails.confirm1"), this.$t("Shopping.Tips"), {
          confirmButtonText: this.$t("Shopping.yes"),
          cancelButtonText: this.$t("Shopping.no"),
          type: "error",
        })
        .then(() => {
          // 删除订单接口
          _this
            .$dele(
              `user/order/${_this.$Cookie.getCookie("userID")}/${
                _this.dataList[index][0].orderid
              }`
            )
            .then((res) => {
              if (res.code == 204) {
                const j =
                  _this.pageObj.pageSize * (_this.pageIndex - 1) + index;
                for (let i = 0; i < _this.orderList.length; i++) {
                  if (
                    _this.orderList[i][0].id == _this.orderStatusList[j][0].id
                  ) {
                    _this.orderList.splice(i, 1);
                    break;
                  }
                }
                _this.orderStatusList.splice(j, 1); // 删除订单状态数组里面的当前数据
                _this.pageObj.totals = _this.orderStatusList.length; // 赋值分页总数量
                _this.renderArray(_this.pageIndex); // 调用分页方法
                _this.$MessageAlert(
                  true,
                  this.$t("Shopping.deletesu"),
                  "success"
                );
              }
            });
        });
    },
    // 处理订单支付结束的时间，截取订单时间加上结束时间 减去 本地时间就是剩下的时间
    endTime(time, id) {
      var _this = this;
      let orderTime = new Date(time).getTime() + 86400; // 订单支付结束时间秒数，订单生成时间 + 结束秒数 86400 1天的时间
      let newTime = Math.floor(new Date().getTime() / 1000); // 本地时间秒数
      // 结束时间 - 本地时间 小于等于0，代表时间过期，取消订单
      if (orderTime - newTime <= 0) {
        _this
          .$put("user/order/cancel", {
            openid: _this.$Cookie.getCookie("userID"),
            order_id: id,
            close_reason: "我不想买了",
          })
          .then((res) => {
            if (res.code == 204) {
              // 将订单状态给为 -1 交易关闭

              // 原数组，循环原数组
              for (let i = 0; i < _this.orderList.length; i++) {
                if (_this.orderList[i][0].orderid == id) {
                  if (_this.orderList[i].length > 1) {
                    for (let j = 0; j < _this.orderList[i].length; j++) {
                      _this.orderList[i][j].order_status = -1;
                    }
                  } else {
                    _this.orderList[i][0].order_status = -1;
                  }
                  break;
                }
              }
              // 状态数组
              for (let i = 0; i < _this.orderStatusList.length; i++) {
                if (_this.orderStatusList[i][0].orderid == id) {
                  if (_this.orderStatusList[i].length > 1) {
                    for (let j = 0; j < _this.orderStatusList[i].length; j++) {
                      _this.orderStatusList[i][j].order_status = -1;
                    }
                  } else {
                    _this.orderStatusList[i][0].order_status = -1;
                  }
                  break;
                }
              }
              // 渲染数组
              for (let i = 0; i < _this.dataList.length; i++) {
                if (_this.dataList[i][0].orderid == id) {
                  if (_this.dataList[i].length > 1) {
                    for (let j = 0; j < _this.dataList[i].length; j++) {
                      _this.dataList[i][j].order_status = -1;
                    }
                  } else {
                    _this.dataList[i][0].order_status = -1;
                  }
                  break;
                }
              }
            }
          });
      }
    },
    // 监听页面刷新或者关闭
    monitorPage() {
      var _this = this;
      // 循环原数组，判断待付款订单
      for (let i = 0; i < _this.orderList.length; i++) {
        // 判断订单状态是否在 待付款
        if (_this.orderList[i][0].order_status === 0) {
          let orderTiem =
            new Date(_this.orderList[i][0].createtime).getTime() + 86400; // 订单支付结束时间秒数，订单生成时间 + 结束秒数 86400 1天的时间
          let newTiem = Math.floor(new Date().getTime() / 1000); // 本地时间秒数
          // 结束时间 - 本地时间 小于等于0，代表时间过期，取消订单
          if (orderTiem - newTiem <= 0) {
            _this.$put("user/order/cancel", {
              openid: _this.$Cookie.getCookie("userID"),
              order_id: _this.orderList[i][0].orderid,
              close_reason: "我不想买了",
            });
          }
        }
      }
    },
    // 支付方式 i18n
    paymentI18n(n) {
      let paytype = "";
      switch (n) {
        case 1:
          paytype = this.$t("MyOrder.remainingSum");
          // paytype = "余额支付";
          break;
        case 2:
          paytype = this.$t("MyOrder.onlinePayment");
          // paytype = "在线支付";
          break;
        case 3:
          paytype = this.$t("MyOrder.payOnDelivery");
          // paytype = "货到付款";
          break;
        case 11:
          paytype = this.$t("MyOrder.backstagePayment");
          // paytype = "后台支付";
          break;
        case 21:
          paytype = this.$t("MyOrder.WeChatPay");
          // paytype = "微信支付";
          break;
        case 22:
          paytype = this.$t("MyOrder.payByAlipay");
          // paytype = "支付宝支付";
          break;
        case 23:
          paytype = this.$t("MyOrder.unionPayPayment");
          // paytype = "银联支付";
          break;
        default:
          break;
      }
      return paytype;
    },
    // 订单状态 i18n
    stateI18n(order_status, refund_status, refund_rtype) {
      // refund_status 申请状态 0申请 1 通过 3 4 通过申请(需客户寄回商品) 5 关闭申请(换货完成) -1 驳回 -2 客户取消
      // order_status 订单状态 -1 交易关闭 0 待付款 1 待发货 2 待收货 3 已完成
      // refund_rtype 申请类型 0 退款(仅退款不退货) 1 退款退货 2 换货
      let text = "";
      // 申请状态 为申请中 或 通过。再进行处理方式判断，申请状态 1 维权完成后也还是存在
      if (
        refund_status === 0 ||
        refund_status === 3 ||
        refund_status === 4 ||
        refund_status === 5
      ) {
        // 订单状态
        switch (order_status) {
          case -1:
            text = this.$t("MyOrder.tradingClosed");
            // text = "交易关闭";
            break;
          case 0:
            text = this.$t("MyOrder.WaitForPayment");
            // text = "待付款";
            break;
          case 1:
            // 待发货
            if (refund_rtype === 0) {
              text = this.$t("MyOrder.refund");
              // text = "待退款";
            } else if (refund_rtype === 1) {
              text = this.$t("MyOrder.returnGoods");
              // text = "待退货退款";
            } else if (refund_rtype === 2) {
              text = this.$t("MyOrder.exchangeGoods");
              // text = "待换货";
            }
            break;
          case 2:
            // 待收货
            if (refund_rtype === 0) {
              text = this.$t("MyOrder.refund");
              // text = "待退款";
            } else if (refund_rtype === 1) {
              text = this.$t("MyOrder.returnGoods");
              // text = "待退货退款";
            } else if (refund_rtype === 2) {
              text = this.$t("MyOrder.exchangeGoods");
              // text = "待换货";
            }
            break;
          case 3:
            // 已完成
            if (refund_rtype === 0) {
              text = this.$t("MyOrder.refund");
              // text = "待退款";
            } else if (refund_rtype === 1) {
              text = this.$t("MyOrder.returnGoods");
              // text = "待退货退款";
            } else if (refund_rtype === 2) {
              text = this.$t("MyOrder.exchangeGoods");
              // text = "待换货";
            }
            break;
          default:
            break;
        }
      } else {
        // 没有申请中，或者没通过的，正常显示
        switch (order_status) {
          case -1:
            text = this.$t("MyOrder.tradingClosed");
            // text = "交易关闭";
            break;
          case 0:
            text = this.$t("MyOrder.WaitForPayment");
            // text = "待付款";
            break;
          case 1:
            text = this.$t("MyOrder.WaitForSending");
            // text = "待发货";
            break;
          case 2:
            text = this.$t("MyOrder.WaitForReceiving");
            // text = "待收货";
            break;
          case 3:
            text = this.$t("MyOrder.transactionCompleted");
            // text = "交易完成";
            break;
          default:
            break;
        }
      }
      return text;
    },
  },
  filters: {
    // 订单状态
    orderStatus(order_status, refund_status, refund_rtype, stateI18n) {
      // order_status 订单状态
      // refund_status 申请状态 null 为没有  0申请 1 完成 3 卖家同意 4 用户填写了快递单号(客户寄回商品) 5 卖家收到退还的货物，再次发货 -1 驳回 -2 客户取消
      // refund_rtype 处理方式 null 为没有
      // let text = "";
      // // 申请状态 为申请中 或 通过。再进行处理方式判断
      // if(refund_status === 0 || refund_status === 3 || refund_status === 4 || refund_status === 5) {
      //   // 订单状态
      //   switch (order_status) {
      //     case -1:
      //       text = "交易关闭";
      //       break;
      //     case 0:
      //       text = "待付款";
      //       break;
      //     case 1:
      //       // 待发货
      //       if(refund_rtype === 0) {
      //         text = "待退款";
      //       } else if(refund_rtype === 1) {
      //         text = "待退货退款";
      //       } else if(refund_rtype === 2) {
      //         text = "待换货";
      //       }
      //       break;
      //     case 2:
      //       // 待收货
      //       if(refund_rtype === 0) {
      //         text = "待退款";
      //       } else if(refund_rtype === 1) {
      //         text = "待退货退款";
      //       } else if(refund_rtype === 2) {
      //         text = "待换货";
      //       }
      //       break;
      //     case 3:
      //       // 已完成
      //       if(refund_rtype === 0) {
      //         text = "待退款";
      //       } else if(refund_rtype === 1) {
      //         text = "待退货退款";
      //       } else if(refund_rtype === 2) {
      //         text = "待换货";
      //       }
      //       break;
      //     default:
      //       break;
      //   }
      // } else {
      //   // 没有申请中，或者没通过的，正常显示
      //   switch (order_status) {
      //     case -1:
      //       text = "交易关闭";
      //       break;
      //     case 0:
      //       text = "待付款";
      //       break;
      //     case 1:
      //       text = "待发货";
      //       break;
      //     case 2:
      //       text = "待收货";
      //       break;
      //     case 3:
      //       text = "交易完成";
      //       break;
      //     default:
      //       break;
      //   }
      // }
      //  else if(k == 2) {
      //   order_status = "待换货";
      // }
      // return text;
      return stateI18n(order_status, refund_status, refund_rtype);
    },
    // 订单支付方式
    paymentMethod(value, paymentI18n) {
      // let paytype = "";
      // switch (value) {
      //   case 1:
      //     paytype = "余额支付";
      //     break;
      //   case 2:
      //     paytype = "在线支付";
      //     break;
      //   case 3:
      //     paytype = "货到付款";
      //     break;
      //   case 11:
      //     paytype = "后台支付";
      //     break;
      //   case 21:
      //     paytype = "微信支付";
      //     break;
      //   case 22:
      //     paytype = "支付宝支付";
      //     break;
      //   case 23:
      //     paytype = "银联支付";
      //     break;
      //   default:
      //     break;
      // }
      // return paytype;
      return paymentI18n(value);
    },
    // 时间戳转换日期
    orderTiem(value) {
      let time = new Date(parseInt(value) * 1000);
      let month = time.getMonth() + 1; // 月
      let date = time.getDate(); // 日
      let hour = time.getHours(); // 时
      let minute = time.getMinutes(); // 分
      let second = time.getSeconds(); // 秒
      let OGTime =
        time.getFullYear() +
        "年" +
        (month < 10 ? "0" + month : month) +
        "月" +
        (date < 10 ? "0" + date : date) +
        "日" +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minute < 10 ? "0" + minute : minute) +
        ":" +
        (second < 10 ? "0" + second : second);
      return OGTime;
    },
    // 价格，保留两位小数
    decimal(n) {
      return n.toFixed(2);
    },
  },
  computed: {
    // 订单金额
    orderAmount() {
      var _this = this;
      return function (index) {
        let money = 0;
        for (let i = 0; i < _this.dataList[index].length; i++) {
          money +=
            Number(_this.dataList[index][i].price) *
            Number(_this.dataList[index][i].total);
          // money += Number(_this.dataList[index][i].price);
        }
        return money.toFixed(2);
      };
    },
  },
  created() {
    var _this = this;
    // 获取用户订单
    _this
      .$get(`user/order/${_this.$Cookie.getCookie("userID")}/all`)
      .then((res) => {
        // 循环返回的订单数据，看是否有相同的订单，有就放一起。
        // (注：返回的数据是一个商品一条数据，如果一个订单多个商品，就要进行处理，把相同订单商品放在同一个订单上。)
        if (res.code == 200) {
          let newArr = [];
          // 循环res.data.list数据，判断订单号相同的就放一起
          // (注：返回的数据是一个商品一条数据，如果一个订单多个商品，就要进行处理，把相同订单商品放在同一个订单上。)
          for (let i = 0; i < res.data.length; i++) {
            let dataArr = [];
            // 循环一次，dataArr就是空数组，添加到数组里面，下面进行判断
            dataArr.push(res.data[i]);
            // 循环，i+1,如i=0,那么下面j=0，相当与和自身比较，所以j=i+1,直接进行下一位比较。
            for (let j = i + 1; j < res.data.length; j++) {
              // 判断dataArr数组第一个id是否和res.data.list里面的id相同，因为dataArr数组在第一层循环只添加了一个，所以dataArr[0]
              if (dataArr[0].orderid == res.data[j].orderid) {
                // 第一层循环就添加了一个到数组，所以后面有相同的直接添加到数组.
                dataArr.push(res.data[j]);
                res.data.splice(j, 1);
                // 数组删除后，里面的会往前进一位(例:如果删除了2下标的，下标3的前进一位会变成2，不减1，那么下标2就会跳过检测)
                j--;
              }
            }
            // 判断订单是否在 待付款 状态
            if (dataArr[0].order_status === 0) {
              _this.endTime(dataArr[0].createtime, dataArr[0].orderid);
            }

            newArr.push(dataArr);
          }
          let arrdata = [];
          // 循环，分页组件，每页显示多少条数据，拿处理后的newArr前几条数据渲染到页面
          for (let i = 0; i < _this.pageObj.pageSize; i++) {
            arrdata.push(newArr[i]);
          }
          _this.dataList = arrdata; // 渲染的订单数据
          _this.orderStatusList = JSON.parse(JSON.stringify(newArr)); // 订单状态列表
          _this.orderList = JSON.parse(JSON.stringify(newArr)); // 存储的完整订单数据，处理后的
          // 判断返回的订单数量，是否大于分页，每页显示的数量，如果是就显示分页，如果不是就不显示
          if (newArr.length > _this.pageObj.pageSize) {
            _this.pageObj.totals = newArr.length;
            _this.pagingBool = true; //显示分页
          }
          _this.loading = false;
        }
        window.addEventListener("beforeunload", (e) => _this.monitorPage(e));
      });
  },
  beforeDestroy() {
    this.monitorPage(); //调用刷新或者关闭方法
  },
  destroyed() {
    window.removeEventListener("beforeunload", (e) => this.monitorPage(e));
  },
};
</script>

<style lang="less" scoped>
.orderContent {
  h2 {
    color: #555;
    text-transform: none;
    font-size: 28px;
    margin: 0px;
    margin-bottom: 20px;
  }
}
// 标签页，底部边框
/deep/ .el-tabs--border-card {
  border: 0px;
  box-shadow: none;
}
/deep/ .el-tabs--border-card > .el-tabs__header {
  background-color: transparent;
  border: 0px;
  margin-bottom: 40px;
}
/deep/ .el-tabs--border-card {
  background-color: transparent;
}
/deep/
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #ff6700;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #ff6700;
}
/deep/ .el-tabs--border-card > .el-tabs__content {
  padding: 0px;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border-right: 1px solid #ccc;
  height: 25px;
  line-height: 25px;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child {
  border-right: 0px;
}
.placeholder {
  display: inline-block;
  margin: 0px 8px;
  color: #cecece;
}
.tables {
  border: 1px solid #ff6700;
  margin-bottom: 30px;
  // margin: 10px;
  h3 {
    text-transform: none;
    font-size: 21px;
    color: #ff6700;
    margin: 20px 0px 0px 20px;
  }
  .tables_title {
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #ff6700;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    padding-top: 15px;
    .title_right {
      h3 {
        margin: 0px;
        font-size: 25px;
        display: inline;
        color: #333;
      }
    }
  }
  .tables_content {
    min-height: 145px;
    padding: 25px;
    position: relative;
    .product_list {
      ul {
        margin: 0px;
      }
      li {
        margin-bottom: 20px;
      }
      li:last-child {
        margin-bottom: 0px;
      }
      .product_img {
        width: 70px;
        height: 70px;
        display: inline-block;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .product_title {
        max-width: 350px;
        font-size: 15px;
        margin-left: 30px;
        display: inline-block;
        vertical-align: middle;
        p {
          margin: 0px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span {
          color: #555;
          margin-top: 5px;
          display: block;
        }
      }
    }
    .order_payment {
      position: absolute;
      top: 20px;
      right: 20px;
      button {
        font-size: 13px;
        color: #666;
        text-decoration: none;
        padding: 5px 20px;
        display: block;
        margin-bottom: 10px;
        border: 1px solid #666;
      }
      .payment_button {
        border-color: #ff6700;
        background-color: #ff6700;
        color: white;
      }
    }
  }
}
</style>